<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fns" uri="http://java.sun.com/jsp/jstl/functionss" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Home - BioCode</title>

</head>
<body>
<div id="main">

    <script src="${host}/static/js/highcharts/highcharts.js"></script>
    <script src="${host}/static/js/highcharts/highcharts-more.js"></script>

    <script src="${host}/static/js/highcharts/map.js"></script>
    <script src="${host}/static/js/highcharts/data.js"></script>
    <script src="${host}/static/js/highcharts/world.js"></script>


    <script src="${host}/static/js/highcharts/drilldown.js"></script>

    <div id="tool-header">
        <div class="row content-container" style="padding-bottom: 0">
            <div class="col-md-12">
                <h1 class="tool-title"><a href="${host}/tools/${tool.id}/show">${tool.name}</a>
                    <small>${tool.desc}</small>
                </h1>
            </div>
        </div>
        <ul class="nav nav-tabs" id="tool-nav-tab">
            <li><a href="${host}/tools/${tool.id}/show"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="${host}/tools/${tool.id}/manual"><i class="fa fa-book"></i> Manual</a></li>
            <li><a href="${host}/tools/${tool.id}/releases"><i class="fa fa-download"></i> Downloads</a>
            </li>
            <li class="active"><a href="${host}/tools/${tool.id}/stat"><i class="fa fa-bar-chart"></i> Statistics</a>
            </li>
        </ul>
    </div>
    <div class="content-container" style="padding-top: 0px">
        <script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
        <div data-tid="1" id="download-trend" >

        </div>
        <div data-tid="1" id="overall-download" >

        </div>
        <div data-tid="1" id="download-distribute" >

        </div>
    </div>
</div>
<script>

    $(function () {
        var ode = document.getElementById('overall-download')
        if (ode) {
            var tid = ode.dataset.tid
            $.get("${host}/api/downloadStat?id=${tool.id}", function (data) {
                $('#download-trend').highcharts({
                    chart: {
                        type: 'area'
                    },
                    title: {
                        text: 'Download Trends'
                    },
                    xAxis: {
                        categories: data.dates,
                        tickmarkPlacement: 'on',
                        title: {
                            enabled: false
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Count'
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        shared: true
                    },
                    plotOptions: {
                        area: {
                            stacking: 'normal',
                            lineColor: '#666666',
                            lineWidth: 1,
                            marker: {
                                lineWidth: 1,
                                lineColor: '#666666'
                            }
                        }
                    },
                    series: data.series
                });
                $('#overall-download').highcharts({
                    chart: {
                        type: 'area'
                    },
                    title: {
                        text: 'Overall Download Count By Month'
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        categories: data.dates,
                        tickmarkPlacement: 'on',
                        title: {
                            enabled: false
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Count'
                        }
                    },
                    tooltip: {
                        shared: true
                    },
                    plotOptions: {
                        area: {
                            stacking: 'normal',
                            lineColor: '#666666',
                            lineWidth: 1,
                            marker: {
                                lineWidth: 1,
                                lineColor: '#666666'
                            }
                        }
                    },
                    series: $.map(data.series, function (s) {
                        return {
                            name: s.name,
                            data: s.data.reduce(function (acc, n) {
                                acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + n);
                                return acc
                            }, [])
                        }
                    })
                });
            });

            $.get("${host}/api/toolsDistribute?id=${tool.id}", function (data) {
                $('#download-distribute').highcharts('Map', {
                    title: {
                        text: 'Worldwide Download Distribution',
                    },
                    chart: {
                        backgroundColor: '#FAFAFA',
                        style: {
                            fontFamily: 'Arial',
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    mapNavigation: {
                        enabled: false,
                        enableDoubleClickZoomTo: false
                    },
                    colorAxis: {
                        min: 1,
                        max: 1000,
                        type: 'logarithmic'
                    },
                    series: [{
                        data: data,
                        mapData: Highcharts.maps["custom/world"],
                        joinBy: ['iso-a2', 'code'],
                        name: 'Number of Downloads in ',
                        states: {
                            hover: {
                                color: '#BADA55'
                            }
                        },
                        tooltip: {
                            valueSuffix: ''
                        }
                    }]
                });
            });

        }

    });

</script>
</body>
</html>
